<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧班牌</title>
    <style>
        *
        {
            font-family: "楷体";
        }
        .nav {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-around; /* 均匀分布在水平方向 */
            align-items: center; /* 垂直居中 */
        }

        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }
        .upload-container {
            text-align: center; /* 让内容居中 */
            margin-top: 20px;
        }

        .upload-box {
            position: relative; /* 添加相对定位 */
            border: 2px dashed #000;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px auto;
            overflow: hidden; /* 隐藏溢出部分 */
        }

        .upload-box img {
            width: 100%; /* 图片宽度填充父容器 */
            height: 100%; /* 图片高度填充父容器 */
            object-fit: cover; /* 调整图片尺寸，保持纵横比并填充整个容器 */
        }

        .upload-box span {
            position: absolute; /* 绝对定位 */
            top: 50%; /* 位于父容器垂直居中 */
            left: 50%; /* 位于父容器水平居中 */
            transform: translate(-50%, -50%); /* 通过平移来调整位置 */
            font-size: 40px;
            z-index: 1; /* 确保在图片之上 */
        }

        .upload-box input[type="file"] {
            position: absolute; /* 绝对定位 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 隐藏实际的文件选择按钮 */
            z-index: 2; /* 确保文件选择按钮在最上层 */
        }

        .upload-button {
            margin-top: 10px; /* 调整上传按钮的上边距 */
        }
        .slideshow-container {
            width: 80%; /* 将幻灯片容器的宽度设置为原来的80% */
            margin: auto; /* 水平居中显示 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .mySlides {
            width: 100%; /* 设置幻灯片的宽度为100% */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

    </style>
</head>
<body background="images/WEB.jpg"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed">
<div class="nav-right">
    <div class="nav-right-name" style="color:forestgreen">
        <dl class="nav-right-signout">
            <dd align="center">智慧+的校园体验</dd>
            <dd align="right"><button onclick="window.location.href='/login'">退 出 账 号</button></dd>
        </dl>
    </div>
</div>
<div class="nav">
    <div class="dropdown" style="color: cornflowerblue">
        <span>学生签到情况</span>
        <div class="dropdown-content">
            <a href="/Attendance">上学签到签退</a>
            <a href="/TimeControl.html">学生签到设置</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级信息</span>
        <div class="dropdown-content">
            <a href="/ClassTable">班级课表</a>
            <a href="/Teacher">教师队伍</a>
            <a href="/Score">班级成绩</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级相册</span>
        <div class="dropdown-content">
            <a href="/Photo">上传照片</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级形象</span>
        <div class="dropdown-content">
            <a href="#">宣传标语</a>
            <a href="#">今日之星</a>
        </div>
    </div>
</div>
<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="images/WEB.jpg" style="width:35%">
    </div>

    <div class="mySlides fade">
        <img src="images/bk.jpg" style="width:35%">
    </div>

    <div class="mySlides fade">
        <img src="images/1.jpg" style="width:35%">
    </div>
</div>
<div class="upload-container">
    <form id="photoForm" action="/uploadPhoto" method="post" enctype="multipart/form-data">
        <h3>此处从本地上传你上传的图片</h3>
        <label for="files" class="upload-box">
            <span>+</span>
            <input type="file" id="files" name="files[]" multiple style="display: none;" accept="image/*">
            <img id="previewImg" src="#" alt="预览图片">
        </label>
        <button class="upload-button" type="submit">一键上传</button>
    </form>
</div>
<!--此处为JavaScript-->
<script>
    document.getElementById('files').addEventListener('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').setAttribute('src', e.target.result);
            };
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}
        slides[slideIndex-1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>
</body>
</html>
